<script>
import { getShowImage, richTextAddAttrForTag } from "@/utils"
import audio from "../../../components/audio.vue"
import { getNginxUrl } from "@/utils/settings"
import noteIcon from "../../assets/note.svg"
import phrasesSynosRels from "./components/phrasesSynosRels.vue"

export default {
  name: "wordInfo",
  components: { audio, phrasesSynosRels },
  methods: {
    richTextAddAttrForTag,
    getNginxUrl,
    getShowImage,
    // 为富文本的b标签添加字体颜色主题色
    handleRichTextStyle(text) {
      return richTextAddAttrForTag(text, "b", "style=\"color: var(--theme-color);\"")
    },
  },
  props: {
    wordInfo: {
      type: Object,
      default() {
        return null
      },
    },
  },
  data() {
    return {
      noteIcon,
    }
  },
}
</script>

<template>
  <view class="components" v-if="wordInfo">
    <!--		英文单词-->
    <view class="enWord">{{ wordInfo.enWord }}</view>
    <!--		音标-->
    <view class="phonetic">
      <audio :text="wordInfo.phonetic" :audio-src="wordInfo.wordAudioUrl ? getNginxUrl() + wordInfo.wordAudioUrl : ''"></audio>
    </view>
    <!--		中文解释-->
    <view class="znWord">{{ wordInfo.znWord }}</view>
    <!--		图片-->
    <image :src="getShowImage(wordInfo.imgNotesUrl)" mode="widthFix" class="img" v-if="wordInfo.imgNotesUrl"></image>
    <!--		例句列表-->
    <view class="enSentence block" v-if="wordInfo.sentenceList && wordInfo.sentenceList.length > 0">
      <view class="title">例句释义</view>
      <!--			例句列表-->
      <view class="sentence-list" v-for="(item, index) in wordInfo.sentenceList" :key="item.sentence">
        <view class="sentence-item">
          <view class="serial-number">{{ index + 1 }}</view>
          <view class="info">
            <!--						单词释义-->
            <view class="row">{{ item.definition }}</view>
            <!--						例句原文-->
            <view class="row" v-html="handleRichTextStyle(item.sentenceEng)"></view>
            <!--						例句翻译-->
            <view class="row trans">{{ item.trans }}</view>
          </view>
        </view>
      </view>
    </view>
    <!--		单个例句-->
    <view class="enSentence block" v-else-if="wordInfo.enSentence">
      <view class="title">例句</view>
      <view class="content">{{ wordInfo.enSentence }}</view>
    </view>
    <!--		解析-->
    <view class="analysis block" v-if="wordInfo.analysis">
      <view class="title">释义</view>
      <view class="content" v-html="wordInfo.analysis"></view>
    </view>
    <!--		笔记-->
    <view class="note-description" v-if="wordInfo.noteDescription">
      <view class="title">
        <image class="icon" :src="noteIcon"></image>
        <view class="text">笔记</view>
      </view>
      <text>{{ wordInfo.noteDescription.replace(/\\n/g, "\n") }}</text>
    </view>
    <!--		短语、同义词、词根-->
    <view style="margin-top: 50rpx">
      <phrasesSynosRels
        :phrases-list="wordInfo.phrasesList"
        :synos-list="wordInfo.synosList"
        :rels-list="wordInfo.relsList"
      ></phrasesSynosRels>
    </view>
  </view>
</template>

<style scoped lang="scss">
.components {
  padding: 40rpx;

  .enWord {
    font-size: 46rpx;
    font-weight: bold;
    color: var(--text-color);
  }

  .phonetic {
    margin-top: 10rpx;
  }

  .znWord {
    font-size: 32rpx;
    color: var(--text-color-light);
    margin-top: 20rpx;
  }

  .img {
    margin-top: 30rpx;
    width: 100%;
    border-radius: 20rpx;
    overflow: hidden;
  }

  > .block {
    margin-top: 30rpx;

    > .title {
      background: #f3f3f3;
      color: var(--text-color-light);
      font-size: 30rpx;
      padding: 8rpx;
      display: inline-block;
    }

    > .content {
      margin-top: 10rpx;
      font-size: 30rpx;
      color: var(--text-color);
      line-height: 1.8;
    }

    &.enSentence {
      .sentence-list {
        .sentence-item {
          margin-top: 30rpx;
          display: flex;
          font-size: 30rpx;
          .serial-number {
            line-height: 2;
          }
          .info {
            width: 0;
            flex: 1;
            margin-left: 20rpx;
            .row:not(:first-child) {
              margin-top: 10rpx;
            }
            .row {
              width: 100%;
              //文本溢出部分自动换行
              word-wrap: break-word;
              overflow-wrap: break-word;
            }
            .trans {
              color: var(--text-color-light);
            }
          }
        }
      }
    }
  }
  > .note-description {
    margin-top: 50rpx;
    font-size: 30rpx;
    line-height: 1.7;
    border: 2rpx solid var(--border-color);
    border-radius: 20rpx;
    padding: 20rpx;
    > .title {
      color: var(--text-color-light);
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      > .icon {
        width: 30rpx;
        height: 30rpx;
        margin-right: 10rpx;
      }
    }
  }
}
</style>
